<template>
  <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <h1 style="float: left;line-height: 60px;font-size: 20px;padding: 0 20px">山东财经大学区块链打卡辅助平台</h1>
    <el-menu-item index="1" style="float:right;margin: 0 60px;">{{ user_data.name }}</el-menu-item>
  </el-menu>
  <el-container>
    <el-main>
      <el-row>
        <el-col :xs="{span:24}" :md="{span:9,offset:2}">
          <el-descriptions title="基本信息" direction="vertical" :column="5" border>
            <el-descriptions-item label="姓名">{{ user_data.name }}</el-descriptions-item>
            <el-descriptions-item label="学号">{{ user_data.study_id }}</el-descriptions-item>
            <el-descriptions-item label="居住地" :span="3">{{ user_data.now_address }}</el-descriptions-item>
            <el-descriptions-item label="邮箱" :span="2">
              <el-input v-model="user_data.email"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="密码" :span="3">
              <el-input v-model="user_data.password"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="开始时间" :span="2">{{ user_data.addTime }}</el-descriptions-item>
            <el-descriptions-item label="结束时间" :span="3">
              {{ user_data.expireTime }}<span style="color: #ff5937;font-weight: bold;margin: 0 5px;">*</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :xs="{span:24}" :md="{span:9,offset: 1}">
          <el-card style="margin: 20px auto 0;" :body-style="{paddingTop:clientWidth>=970?'50px':'10px',paddingBottom:clientWidth>=970?'50px':'10px'}">
            <template #header>
              系统个人信息
            </template>
            <el-form label-width="5rem" label-position="right">
              <el-form-item label="姓名">
                <el-input disabled :size="input_size" v-model="user_data.name"></el-input>
              </el-form-item>
              <el-form-item label="学号">
                <el-input disabled :size="input_size" v-model="user_data.study_id"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group style="width: 100%" disabled v-model="user_data.sex" size="small">
                  <el-radio-button :label="1">男</el-radio-button>
                  <el-radio-button :label="0">女</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="家庭住址">
                <el-input :disabled="edit" :size="input_size" v-model="user_data.address"></el-input>
              </el-form-item>
              <el-form-item label="现居地址">
                <el-input :disabled="edit" :size="input_size" v-model="user_data.now_address"></el-input>
              </el-form-item>
              <el-form-item label="本人电话">
                <el-input :disabled="edit" :size="input_size" v-model="user_data.contact"></el-input>
              </el-form-item>
              <el-form-item label="家长电话">
                <el-input :disabled="edit" :size="input_size" v-model="user_data.phone"></el-input>
              </el-form-item>
              <el-form-item label="学院">
                <el-select disabled :size="input_size" v-model="user_data.college_id" style="width: 100%">
                  <el-option v-for="option in $college" :label="option[1]" :value="option[0]"></el-option>
                </el-select>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="省份">
                    <el-select default-first-option @change="get_city" :size="input_size"
                               v-model="user_data.province_id"
                               style="width: 100%">
                      <el-option v-for="option in $province" :label="option[1]" :value="option[0]"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="城市" required>
                    <el-select :size="input_size" v-model="user_data.city_id" style="width: 100%"
                               :loading="city_loading">
                      <el-option v-for="option in city_list" :label="option[1]" :value="option[0]"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-row>
              <el-col :span="16" style="text-align: right">
              </el-col>
              <el-col :span="3" style="text-align: right">
                <el-button type="success" size="medium" plain="" @click="save">保存</el-button>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="3" style="text-align: right">
                <el-button type="danger" size="medium" plain="" @click="del">删除</el-button>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "admin_user",
  data() {
    return {
      user_data: '',
      input_size: 'mini',
      sign_status: '',
      beginDate: [],
      endDate: [],
      dialogVisible: false,
      new_tifen: 1,
      timer: null
    }
  },
  methods: {
    get_city(province_id) {
      let str = ''
      this.user_data.city_id = '0'
      this.$axios({
        url: '/api/get_city',
        params: {
          province_id: province_id
        },
      }).then((res) => {
        str = res.data
        const reg = /<option.*?option>/g
        const value_reg = /[0-9]{1,3}/
        const label_reg = />.*?</
        const options = str.match(reg)
        const list = []
        for (const option of options) {
          let value = option.match(value_reg)[0]
          let label = option.match(label_reg)[0]
          label = label.slice(1, label.length - 1)
          list.push([value, label])
        }
        this.city_list = list
      })
    },
    get_data() {
      this.$axios({
        url: '/api/user/info',
        params: {
          id: this.$route.params.school_id
        },
      }).then((res) => {
        this.user_data = JSON.parse(JSON.stringify(res.data))
        localStorage['server_data'] = JSON.stringify(res.data)
        this.user_data['province_id'] = this.user_data['province_id'].toString()
        this.user_data['college_id'] = this.user_data['college_id'].toString()
        this.get_city(this.user_data['province_id'])
        this.user_data['city_id'] = res.data['city_id'].toString()
      })
    },
    save() {
      this.$axios.post('/api/save/info', this.user_data).then((res) => {
        this.dialogVisible = false
        this.get_data()
        this.$ElMessage({
          message: '保存成功',
          type: 'success'
        })
      })
    },
    del() {
      this.$axios.get('/api/del/info?id=' + this.user_data.school_id).then((res) => {
        if (res.data) {
          this.$ElMessage({
            message: '删除成功',
            type: 'success'
          })
          setTimeout((res) => {
            this.$router.push('/wwwww')
          }, 1000)
        } else {
          this.$ElMessage.error({message:'删除失败'})
        }
      })
    }
  },
  mounted() {
    this.get_data()
  }
}
</script>

<style lang="less" scoped>
.link_danger {
  color: #F56C6C;
  margin: 0 10px;

  &:hover {
    text-decoration: underline;
    cursor: pointer;
  }
}

.link_primary {
  color: #409EFF;
  float: right;
  margin-right: 5px;

  &:hover {
    text-decoration: underline;
    cursor: pointer;
  }
}
</style>